<template>
  <div id="product-seckill-page">
    <div class="page-title" style="background: none; color: #FFFFFF"
         :style="{
      top:(this.getSafeArea().top)+'px',
         }">
      <div id="back-button" @click="$router.push('/')">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span v-text="detail.title"></span>
    </div>
    <div class="top-page-banner"
         :style="{
      top:(this.getSafeArea().top)+'px',
         }">
      <img width="100%" ref="top-page-banner-img" :style="{height:imageHeight+'px'}"
           :src="detail.image?detail.image:'/static/page-bg/product-seckill-page-bg.png'" alt="">
    </div>


    <div id="time-box" :style="{top:(imageHeight+this.getSafeArea().top-4)+'px'}"
         v-if="detail.status.id===1">
      <div class="content"
           :style="{
        width: (95*detail.hoursArr.length)+'px'
      }">
        <div class="item" v-for="(item,index) in detail.hoursArr" :key="index"
             :class="getCurrClass(item)" @click="setCurr(item,index)">
          <span v-text="item.hour"></span>
        </div>
        <div class="c"></div>
      </div>
    </div>

    <i-scroller-box v-show="detail.status.id===1" id="product-list" style="background: #f1f1f1" ref="i-scroller-box"
                    url="ShopProduct/getShopSkillProductList"
                    :style="{
      width:'100%',
      height: (getWinSize().height-imageHeight-this.getSafeArea().top-80)+'px',
      paddingTop:(imageHeight+this.getSafeArea().top+40)+'px'
         }">

      <template v-slot:list-item="{index,data}">
        <!--单个优惠券-->
        <div class="item" :key="index">
          <div class="left">
            <img :src="data.shopProductImage" alt="" @click="toDetail(data)">
          </div>
          <div class="right">
            <div class="title ovd_s" style="max-width: 95%; display: inline-block;" v-text="data.shopProductName" @click="toDetail(data)"></div>
            <div class="model" style="height: 35px;">
              型号: <span style="display: inline-block; position: relative; top: 3px; max-width: 75%;" class="ovd_s" v-text="data.model"></span>
            </div>
            <div class="stock-nums">
              剩余库存: <span v-text="data.shopSkillNums-data.shopSkillSaleNums"></span>
            </div>
            <div class="process-box">
              <el-progress :percentage="getPercentage(data)" color="#f56c6c"></el-progress>
            </div>
            <div class="buy-box">
              <div class="price" v-text="'￥'+ToMoney(data.shopSkillPrice)"></div>
              <el-button type="primary" @click="goToShopSkill(data)" v-text="getButtonText(data)" :disabled="data.shopSkillNums<=data.shopSkillSaleNums || currListStatus>0"></el-button>
            </div>
          </div>
          <div class="c"></div>
        </div>
      </template>
    </i-scroller-box>


    <div class="no-seckill" :style="{top:  (imageHeight+this.getSafeArea().top+20)+'px'}"
         v-if="detail.id===0">
      系统暂无秒杀活动,请您多关注App公告
    </div>

    <div class="next-seckill" :style="{top:  (imageHeight+this.getSafeArea().top+20)+'px'}"
         v-if="detail.id>0 && detail.status.id===0">
      下场活动 <span class="b red" v-text="detail.title"></span> 将于: <span v-text="detail.date" class="b red"></span>
      开始
    </div>


    <div class="skill-bottom" v-if="detail.status.id===1 && detail.id>0" style="text-align: center; color: #FFFFFF">
      <div  v-show="currListStatus===0">
        当前期剩余时间:
        <cutdown-box :call-back="getDetail" :curr-seconds-params="detail.seconds"/>
      </div>

      <div  v-show="currListStatus>0">
        <span>当前时间段</span>
        <el-tag :type="currListStatus===10?'warning':'info'" v-text="currListStatus===10?'已过期':'未开始'">标签二</el-tag>
      </div>
    </div>
  </div>
</template>

<script>
import IScrollerBox from '../common/IScrollerBox'
import CutdownBox from '../common/CutdownBox'

export default {
  name: 'ProductSeckill',
  components: {CutdownBox, IScrollerBox},
  data: function () {
    return {
      myScroller: null,
      imageHeight: (this.getWinSize().width * 0.5),
      timer: null,
      form: {
        page: 1,
        pageSize: 20,
        currHour:'',
      },
      detail: {
        'id': 0,
        'title': '',
        'image': '',
        'date': '2023-01-04',
        'timeArr': '10:00,23:00',
        'seconds': 2951,
        'hoursArr': [
          {
            'hour': '10:00,11:00',
            'status': 0
          },
        ],
        'cityCode': '',
        'status': {
          'name': '',
          'id': -2
        }
      },
      productList: [
        /*  {
           "id": 3,
           "shopId": 1,
           "shopName": "华盛五金店",
           "shopLogo": "http://image.yangfankj.com/shop/logo/1.jpg",
           "shopProductId": 3,
           "shopProductName": "德国欧莱德-磨角机",
           "shopProductImage": "http://image.yangfankj.com/product/103/0.jpg",
           "shopProductClassifyName": "磨角机",
           "model": "常规",
           "price": 215.00,
           "groupPrice": 195.00,
           "groupNums": 10,
           "nums": 215,
           "saleNums": -1,
           "status": 1,
           "startTime": null,
           "endTime": null,
           "isSeckill": null,
           "updatedTime": "2022-08-02 11:32:00"
         } */
      ],
      timeBoxTop: 178,
      productListMarginTop: 220,
      currListStatus:0
    }
  },
  destroyed () {
    clearInterval(this.timer)
    this.myScroller.destroy()
  },
  mounted () {
    let $this = this
    $this.getDetail()
    setTimeout(function () {
      $this.timeBoxTop = $this.$refs['top-page-banner-img'].offsetHeight
      $this.productListMarginTop = $this.$refs['top-page-banner-img'].offsetHeight + 40
    }, 500)

    $this.timer = setInterval(function () {
      $this.clearCurrSearch()
      $this.getDetail()
    }, 30000)
  },
  methods: {
    clearCurrSearch:function () {
      let $this=this
      $this.currListStatus=0
      $this.detail.hoursArr.forEach(function (value, index) {
        if (value.status!==1){
          $this.$set($this.detail.hoursArr[index],'isCurr',0)
        }
      })
    },
    getCurrClass:function (item) {
      if (item.status===1){
        return 'curr'
      }
      if (item.isCurr===1){
        return 'show-curr'
      }
    },
    setCurr:function (item,index) {
      let $this=this
      $this.clearCurrSearch()
      if (item.status!==1){
        $this.$set($this.detail.hoursArr[index],'isCurr',1)
      }
      $this.getList()
    },
    getButtonText:function (data) {
      if (data.shopSkillNums<=data.shopSkillSaleNums){
        return '已经抢光'
      }else{
        return '立即抢购'
      }
    },
    getList: function (hours) {
      var hours=''
      let $this=this
      $this.detail.hoursArr.forEach(function (value, index) {
        if (value.status===1){
          hours=$this.detail.hoursArr[index].hour
        }
      })
      $this.detail.hoursArr.forEach(function (value, index) {
        if (value.isCurr && value.isCurr===1){
          hours=$this.detail.hoursArr[index].hour
          $this.currListStatus=value.status+10
        }
      })
      this.$refs['i-scroller-box'].getList({
        form: {
          shopSkillId: this.detail.id,
          hours:hours,
          page:1
        }
      })
    },
    // 商品详情
    toDetail: function (item) {
      this.$router.push({
        name: 'ProductDetail',
        query: {
          id: item.shopProductId,
          model: item.model,
          shopSkill: 1
        }
      })
    },
    getPercentage: function (item) {
      if (item.shopSkillSaleNums===0){
        return 0
      }else{
        var value=(item.shopSkillSaleNums / item.shopSkillNums).toFixed(2)-0
        return (value*100).toFixed(2)-0
        // return ((item.shopSkillSaleNums / (item.shopSkillNums)).toFixed(2) - 0) * 100
      }
    },
    // 单独购买
    goToShopSkill:function (item) {
      let $this=this
      $this.checkLoginAct(function () {
        $this.bus.$emit('ShopSkillProductDialogCallBus',item)
      })
    },
    getDetail: function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameMember + 'ShopProduct/getShopSkillDetail', {
        cityCode: $this.CurrUser.getCityCode(),
      }, function (data) {
        if (data.id===0){
          return
        }
        $this.detail = data
        $this.getList()
        $this.$forceUpdate()
        if (data.status.id===1){
          setTimeout(function () {
            $this.myScroller = new iScroll('time-box', {
              // 水平滚动
              hScrollbar: true,
              // 垂直滚动
              vScrollbar: false,
              onScrollLimit: function () {

              },
              onScrollElseLimit: function () {

              },
            })
            $this.myScroller.scrollToElement('.curr', true, true)
          }, 500)
        }
      })
    },
    getClass: function (currHour) {
      if (currHour < this.detail.currHour) {
        return 'over'
      } else if (currHour == this.detail.currHour) {
        return 'curr'
      } else {
        return ''
      }
    }
  }
}
</script>

<style scoped>

</style>
